<template>
  <div class="record-table-container">
    <div class="tabs-box">
      <el-tabs v-model="currentTable" type="card">
        <el-tab-pane label="本地记录" name="1">
          <el-table :data="bdTable" stripe max-height="500" style="width: 100%">
            <el-table-column prop="ywlsh" label="业务流水号" width="110px"></el-table-column>
            <el-table-column prop="zjzdz" label="暂（居）住地址"></el-table-column>
            <el-table-column prop="qlrrq" label="迁（流）入日期" width="130px"></el-table-column>
            <el-table-column prop="jzqsrq" label="居住起始日期" width="120px"></el-table-column>
            <el-table-column prop="djdw" label="登记单位"></el-table-column>
            <el-table-column prop="djsj" label="登记时间" width="100px"></el-table-column>
<!--            <el-table-column prop="sbsj" label="上报时间" width="100px"></el-table-column>-->
<!--            <el-table-column prop="sbzt" label="上报状态" width="80px"></el-table-column>-->
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="部级记录" name="2">
          <el-table :data="bjTable" stripe max-height="500" style="width: 100%">
            <el-table-column prop="ywlsh" label="业务流水号" width="110px"></el-table-column>
            <el-table-column prop="zjzdz" label="暂（居）住地址"></el-table-column>
            <el-table-column prop="qlrrq" label="迁（流）入日期" width="130px"></el-table-column>
            <el-table-column prop="jzqsrq" label="居住起始日期" width="120px"></el-table-column>
            <el-table-column prop="djdw" label="登记单位"></el-table-column>
            <el-table-column prop="djsj" label="登记时间" width="100px"></el-table-column>
<!--            <el-table-column prop="sbsj" label="上报时间" width="100px"></el-table-column>-->
<!--            <el-table-column prop="sbzt" label="上报状态" width="80px"></el-table-column>-->
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="bottom">
      <el-button @click="onBack">返回</el-button>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: 'recordTable',
  data () {
    return {
      cardNo: '',
      currentTable: '1',
      bdTable: [],
      bjTable: [],
      xm: ''
    }
  },
  mounted () {
    this.cardNo = this.$route.query['card-no']
    this.xm = this.$route.query['xm']
    this.queryBdData()
    this.queryBjData()
  },
  methods: {
    // 本地
    async queryBdData () {
      let res = await this.$http(this.$api.bzjlBd, { gmsfhm: this.cardNo })
      if (res.code === 200) {
        if (res.data) {
          res.data.forEach(item => {
            item.qlrrq = item.qlrrq ? this.formatDate(item.qlrrq.trim()) : ''
            item.jzqsrq = item.jzqsrq ? this.formatDate(item.jzqsrq.trim()) : ''
            item.djsj = item.djsj ? this.formatDate(item.djsj.trim()) : ''
            item.sbsj = item.sbsj ? this.formatDate(item.sbsj.trim()) : ''
          })
          this.bdTable = res.data
        }
      }
    },
    // 部级
    async queryBjData () {
      let res = await this.$http(this.$api.bzjlBj, { gmsfhm: this.cardNo, xm: this.xm })
      if (res.code === 200) {
        if (res.data) {
          res.data.forEach(item => {
            item.qlrrq = item.qlrrq ? this.formatDate(item.qlrrq.trim()) : ''
            item.jzqsrq = item.jzqsrq ? this.formatDate(item.jzqsrq.trim()) : ''
            item.djsj = item.djsj ? this.formatDate(item.djsj.trim()) : ''
            item.sbsj = item.sbsj ? this.formatDate(item.sbsj.trim()) : ''
            item.djdw = item.sjgsdwmc
          })
          this.bjTable = res.data
        }
      }
    },
    // 返回
    onBack () {
      this.$router.back()
    },
    formatDate (val) {
      let date = ''
      if (val.length > 6 && val.length <= 8) {
        date = val.slice(0, 4) + '-' + val.slice(4, 6) + '-' + val.slice(6, 8)
      } else if (val.length > 8) {
        date = val.slice(0, 4) + '-' + val.slice(4, 6) + '-' + val.slice(6, 8) + ' ' + val.slice(8, 10) + ':' + val.slice(10, 12) + ':' + val.slice(12, 14)
      } else {
        date = val.slice(0, 4) + '-' + val.slice(4, 6)
      }
      return date
    }
  }
}
</script>

<style lang="scss" scoped>
.record-table-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0 30px;
  box-sizing: border-box;
  background-color: #fff;
  .tabs-box {
    padding-top: 30px;
    /*height: 100%;*/
    box-sizing: border-box;
    /deep/ .el-tabs {
      /*height: 100%;*/
      .el-tabs__header {
        border-bottom: 1px solid #02579A;
        margin-bottom: 30px;
        .el-tabs__nav {
          border: none;
          .el-tabs__item {
            padding: 8px 6px;
            height: auto;
            line-height: 1;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #02579A;
            border: 1px solid #02579A;
            border-radius: 6px 6px 0 0;
            margin-right: 10px;
            &.is-active {
              color: #fff;
              background-color: #02579A;
            }
          }
        }
      }
      .el-tabs__content {
        /*height: calc(100% - 62px);*/
        .el-tab-pane {
          .el-table {
            .el-table__header-wrapper {
              th {
                height: 50px;
                background: #E8EDF1;
                color: #333;
              }
            }
            .el-table__body-wrapper {
              td {
                color: #333;
              }
              .el-table__row--striped {
                td {
                  background-color: hsla(207, 24%, 93%, 0.4);
                }
              }
            }
          }
        }
      }
    }
  }
  .bottom {
    padding-top: 80px;
    padding-bottom: 80px;
    text-align: center;
    /deep/ .el-button {
      padding: 0;
      width: 140px;
      height: 40px;
      line-height: 38px;
      border-radius: 0;
      border: 1px solid #02579A;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #FFFFFF;
      background: #02579A;
      margin-left: 20px;
    }
  }
}
</style>
